<template>
    <div id="customManage">
        <div class="customManage_content">
            <h3 class="customManage_title">筛选区</h3>
            <ul class="infoList_filter">
                <li class="infoList_filter_item">
                    <span class="filterSpan">客户级别</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.userLevel"
                    placeholder="请选择">
                    <el-option
                        v-for="item in filterData.userLevelOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select>
                    <span class="filterSpan" style="margin-left: 40px;">开通人员</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.opener"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in filterData.openerOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select>
                    <el-input 
                    class="inputBox"
                    v-model="searchValue"
                    placeholder="搜索报告名称/用户名称">
                    </el-input>
                </li>
                <li class="infoList_filter_item">
                    <span class="filterSpan">有效期</span>
                    <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="--"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                    <span class="filterSpan" style="margin-left: 40px">客户从属</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.userBelong"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in filterData.userBelongOption"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    >
                    </el-option>
                    </el-select>
                </li>
                <li class="infoList_filter_btn">
                    <el-button type="primary" @click="reset">重置</el-button>
                    <!-- <el-button type="success">保存</el-button> -->
                    <el-button type="danger" @click="getCusList">查询</el-button>
                </li>
            </ul>
            <h3 class="customManage_title">报告列表</h3>
            <div class="tableBox">
                <el-table
                    :data="tableData"
                    border
                    class="sentimentTable"
                    style="width: 100%">
                    <el-table-column
                    prop="pageNo"
                    width="50px"
                    type="index"
                    :index="indexCount"
                    label="序号">
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    :show-overflow-tooltip="true"
                    label="客户名称">
                    </el-table-column>
                    <el-table-column
                    prop="userBelongName"
                    :show-overflow-tooltip="true"
                    label="客户从属">
                    </el-table-column>
                    <el-table-column
                    prop="userStatus"
                    :show-overflow-tooltip="true"
                    label="账号状态">
                    <template slot-scope="scope">
                        <span>{{scope.row.userStatus==1?'正常':scope.row.userStatus==2?'冻结':scope.row.userStatus==3?'已过期':''}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="validTime"
                    label="有效期">
                    </el-table-column>
                    <el-table-column
                    prop="openBy"
                    :show-overflow-tooltip="true"
                    label="开通人员">
                    </el-table-column>
                    <el-table-column
                    prop="userLevel"
                    :show-overflow-tooltip="true"
                    label="客户级别">
                    </el-table-column>
                    <el-table-column
                    prop="dataNum"
                    min-width="100px"
                    :show-overflow-tooltip="true"
                    label="今日推送数据">
                    </el-table-column>
                    <el-table-column
                    prop="lastLoginTime"
                    :show-overflow-tooltip="true"
                    label="上次登录">
                    </el-table-column>
                    <el-table-column
                    width="150px"
                    label="操作">
                    <template slot-scope='scope'>
                        <span class="tableBtn edit" @click="viewCusInfo(scope.row)">客户信息</span>
                        <span class="tableBtn edit" v-if="scope.row.userStatus==1" @click="frozenUser(scope.row.id, 1)">冻结</span>
                        <span class="tableBtn edit" v-if="scope.row.userStatus==2" @click="frozenUser(scope.row.id, 0)">解冻</span>
                        <span class="tableBtn delete" @click="deleteCusUser(scope.row)">删除</span>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import '../assets/css/customManage.css'
import {formatDate} from '../utils/common.js'
export default {
    data(){
        return{
            filterData: {
                userLevel: "",
                userLevelOption: [
                { value: "A", label: "客户级别A" },
                { value: "B", label: "客户级别B" },
                { value: "C", label: "客户级别C" },
                { value: "D", label: "客户级别D" },
                { value: "E", label: "客户级别E" }
                ],
                opener:'',
                openerOption: [
                    {value: '11', label: '23'}
                ],
                userBelong: '',
                userBelongOption: []
            },
            searchValue: '',
            dateRange: '',
            tableData: [],
            page: {
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            }
        }
    },
    methods:{
        indexCount(index){
            return (this.page.currentPage - 1)* this.page.size + index +1
        },
        viewCusInfo(item){
            console.log(item)
            this.$router.push(`/cusInfo?id=${item.id}`)
        },
        deleteCusUser(item){ // 删除用户
            let param = item.id;
            this.$Api.deleteCusUser(param).then(res => {
                console.log(res)
                if(res.code == '200'){
                    this.getCusList()
                }
            })
        },
        frozenUser(userId, type){ // 冻结/解冻客户
            let param={
                userId: userId,
                type: type
            }
            this.$Api.frozenUser(param).then(res => {
                console.log(res)
                if(res.code == '200'){
                    this.getCusList()
                }
            })
        },
        sysUserBelong(){ // 客户从属字典查询
            this.$Api.sysUserBelong().then(res => {
               console.log(res);
                if(res.code == '200'){
                    this.filterData.userBelong = '';
                    this.filterData.userBelongOption = [];
                    for (let i = 0; i < res.data.length; i++) {
                        this.filterData.userBelongOption.push(res.data[i]);
                    }
               }
            })
        },
        getOpenerOption(){// 开通人员列表
            this.$Api.getOpenerOption().then(res => {
               console.log(res);
                if(res.code == '200'){
                    this.filterData.opener = '';
                    this.filterData.openerOption = [];
                    for (let i = 0; i < res.data.length; i++) {
                        let obj = {
                            value: res.data[i].id,
                            label: res.data[i].userName
                        }
                        this.filterData.openerOption.push(obj);
                    }
               }
            })
        },
        handleCurrentChange(val){
            this.page.currentPage = val;
            this.page.size = 1;
            this.getCusList();
        },
        handleSizeChange(val){
            this.page.size = val;
            this.getCusList();
        },
        getCusList(){
            let beginTime = '';
            let endTime = '';
            if(this.dateRange.length > 0){
                beginTime = this.formatDate(this.dateRange[0]);
                endTime = this.formatDate(this.dateRange[1]);
            }
            let param = {
                pageNum: this.page.currentPage,
                pageSize: this.page.size,
                isFrontAcct: '1',
                searchValue: this.searchValue,
                beginTime: beginTime,
                endTime: endTime,
                userLevel: this.filterData.userLevel,
                openBy: this.filterData.opener,
                userBelong: this.filterData.userBelong
            };
            this.$Api.userList(param).then(res => {
               console.log(res);
                if(res.code == '200'){
                    this.tableData = res.rows;
                    this.page.total = res.total;
               }
            })
        },
        formatDate (time){
            let date = new Date(time)
            return formatDate(date,'yyyy-MM-dd hh:mm:ss') //年-月-日 时分
        },
        reset(){
            this.searchValue = '';
            this.dateRange = '';
            this.filterData.userLevel = '';
            this.filterData.opener = '';
            this.filterData.userBelong = '';
            this.page.size = 10;
            this.page.currentPage = 1;
        },
    },
    created(){
        this.getOpenerOption();
        this.sysUserBelong();
        this.getCusList()
        
    }

}
</script>